<template>
	<div>
		<!-- 蒙版 -->
		<transition name="fade">
			<div
				v-if="isVisible"
				@click="isVisible = false"
				class="w-screen h-screen bg-zinc-900/80 z-40 fixed top-0 left-0"
			></div>
		</transition>
		<!-- 内容 -->
		<transition name="up">
			<div
				v-if="isVisible"
				class="w-[80%] fixed top-1/3 left-[50%] translate-x-[-50%] z-50 px-2 py-1.5 rounded-sm border dark:border-zinc-600 cursor-pointer bg-white dark:bg-zinc-800 xl:w-[35%]"
			>
				<div class="text-lg font-bol text-zinc-900 dark:text-zinc-200 mb-2">
					{{ title }}
				</div>
				<div class="text-base text-zinc-900 dark:text-zinc-200 mb-2">
					{{ content }}
				</div>

				<div class="flex justify-end">
					<m-button type="info" class="mr-2" @click="onCancelClick">
						{{ cancelText }}</m-button
					>
					<m-button type="primary" @click="onConfirmClick">
						{{ confirmText }}</m-button
					>
				</div>
			</div>
		</transition>
	</div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import mButton from '../button/index.vue'

const props = defineProps({
	title: String,
	content: {
		type: String,
		required: true,
	},
	cancelText: {
		type: String,
		default: '取消',
	},
	confirmText: {
		type: String,
		default: '确定',
	},
	concelHandler: Function,
	confirmHandler: Function,
	close: Function,
})

const isVisible = ref(false)
const show = () => {
	isVisible.value = true
}

onMounted(() => {
	show()
})

const close = () => {
	isVisible.value = false

	// 等待动画完全关闭后再触发close函数
	setTimeout(() => {
		if (props.close) {
			props.close()
		}
	}, 500)
}

const onCancelClick = () => {
	if (props.concelHandler) {
		props.concelHandler()
	}
	close()
}
const onConfirmClick = () => {
	if (props.confirmHandler) {
		props.confirmHandler()
	}
	close()
}
</script>

<style scoped lang="scss">
.fade-enter-from,
.fade-leave-to {
	opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
	transition: all 0.3s;
}

.up-enter-from,
.up-leave-to {
	opacity: 0;
	transform: translate(-50%, 100px);
}

.up-enter-active,
.up-leave-active {
	transition: all 0.3s;
}
</style>
